<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String Formatter</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f0f2f5;
            transition: background-color 0.3s, color 0.3s;
        }

        .container {
            max-width: 100%;
            min-width: 625px;
            padding: 20px;
            border-radius: 8px;
            background-color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            height: calc(100vh - 40px);
            transition: background-color 0.3s, color 0.3s;
            justify-content: center
        }

        .dark-mode {
            background-color: #121212;
            color: #ffffff;
        }

        .dark-mode .container {
            background-color: #1e1e1e;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

        .box1, .box3 {
            flex: 1;
            margin-bottom: 10px;
        }

        .box2 {
            flex: 0.1;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            margin-bottom: 10px;
            flex-direction: row;
            align-content: center;
            align-items: center;
        }

        .box2 > div {
            max-width: 300px;
            min-width: 300px;
            margin: 5px;
        }

        .box2-label {
            display: inline-block;
            width: 64px;
            text-align: right;
            font-weight: bold;
            color: coral;
        }

        textarea {
            font-size: 16px;
            width: 100%;
            height: 100%;
            padding: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
            resize: none;
            box-sizing: border-box;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            transition: box-shadow 0.3s;
        }

        .dark-mode textarea {
            background-color: #333;
            color: #fff;
            border-color: #555;
        }

        textarea:focus {
            box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
            border-color: #4CAF50;
            outline: none;
        }

        .dark-mode textarea:focus {
            box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
            border-color: #236c26;
            outline: none;
        }

        .output {
            font-size: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #f9f9f9;
            overflow-y: auto;
            white-space: pre-wrap;
            height: 100%;
            box-sizing: border-box;
        }

        .dark-mode .output {
            background-color: #444;
            border-color: #666;
        }

        .notification {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            border-radius: 8px;
            display: none;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .dark-mode .notification {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #236c26;
            color: white;
            padding: 15px;
            border-radius: 8px;
            display: none;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.1s;
        }

        .dark-mode button {
            padding: 10px 20px;
            background-color: #236c26;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.1s;
        }

        button:hover {
            background-color: #45a049;
        }

        button:active {
            background-color: #1b7c1e;
            transform: scale(0.98);
        }

        .btn {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        .btn button {
            width: 49%;
        }

        .toggle-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            padding: 10px;
            border: none;
            background-color: #4CAF50;
            color: white;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .dark-mode .toggle-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            padding: 10px;
            border: none;
            background-color: #236c26;
            color: white;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .toggle-btn:hover {
            background-color: #45a049;
        }

        .dark-mode .toggle-btn:hover {
            background-color: #236c26;
        }

        input{
            font-size: 18px;
        }

        .input-prev{
            text-align: right;
            border-right: none;
            border-top: none;
            border-left: none;
            border-color: #817f7f;
        }

        .input-label{
            display: inline-block;
            border-bottom: 2px solid #817f7f;
            line-height: 22px;
            margin-top: 0px;
            background: #fff;
        }

        .dark-mode .input-label{
            display: inline-block;
            border-bottom: 2px solid #666;
            line-height: 22px;
            margin-top: 0px;
            background: #444;
        }

        .input-last{
            border-left: none;
            border-top: none;
            border-right: none;
            border-color: #817f7f;
        }

        .input-prev:focus {
            box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
            border-color: #817f7f;
            outline: none; /* 取消默认的选中边框 */
        }

        .input-last:focus {
            box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
            border-color: #817f7f;
            outline: none; /* 取消默认的选中边框 */
        }

        .dark-mode .input-last {
            background-color: #444;
            border-color: #666;
            color: #ffffff;
        }
        .dark-mode .input-prev {
            background-color: #444;
            border-color: #666;
            color: #ffffff;
        }
        .dark-mode .input-last::placeholder {
            color: #ffffff;
        }
        .dark-mode .input-prev::placeholder {
            color: #ffffff;
        }
        .pointer-cursor {
            cursor: pointer; /* 设置鼠标悬浮时为手型手势 */
        }
        .checkbox-button {
            display: none;
        }

        .checkbox-label {
            display: inline-block;
            padding: 2px 6px;
            font-size: 16px;
            cursor: pointer;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-right: none;
            user-select: none;
            transition: background-color 0.3s, border-color 0.3s, transform 0.2s;
        }

        .dark-mode .checkbox-label {
            display: inline-block;
            padding: 2px 6px;
            font-size: 16px;
            cursor: pointer;
            background-color: #757474;
            border: 1px solid #444;
            border-right: none;
            user-select: none;
            transition: background-color 0.3s, border-color 0.3s, transform 0.2s;
        }

        .checkbox-label:first-of-type {
            border-radius: 8px 0 0 8px;
        }

        .checkbox-label:last-of-type {
            border-radius: 0 8px 8px 0;
            border-right: 2px solid #bbb;
        }

        .dark-mode  .checkbox-label:last-of-type {
            border-radius: 0 8px 8px 0;
            border-right: 2px solid #444;
        }

        .checkbox-label:hover {
            background-color: #e0e0e0;
        }

        .dark-mode  .checkbox-label:hover {
            background-color: #9f9b9b;
        }


        .checkbox-label:active {
            transform: scale(0.95);
        }

        .checkbox-button:checked + .checkbox-label {
            background-color: #4CAF50;
            border-color: #4CAF50;
            color: white;
        }

        .dark-mode .checkbox-button:checked + .checkbox-label {
            background-color: #236c26;
            border-color: #236c26;
            color: white;
        }

        .button-group {
            display: inline-flex;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #e0e0e0;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
            border: 3px solid transparent;
            background-clip: content-box;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* Dark mode scrollbar */
        .dark-mode ::-webkit-scrollbar-track {
            background: #444;
        }

        .dark-mode ::-webkit-scrollbar-thumb {
            background: #aaa;
            border-radius: 4px;
            border: 3px solid transparent;
            background-clip: content-box;
        }

        .dark-mode ::-webkit-scrollbar-thumb:hover {
            background: #888;
        }

        @keyframes breathe {
            0% { transform: scale(0.98); }
            50% { transform: scale(1); }
            100% { transform: scale(0.98); }
        }

        .breathe-btn{
            animation: breathe 2s infinite;
        }
    </style>
</head>
<body>
<button class="toggle-btn" onclick="toggleDarkMode()">亮/暗</button>
<div class="container" id="container">
    <div class="box1">
        <textarea id="inputText" placeholder="请粘贴你的数据在这里..."></textarea>
    </div>
    <div class="box2">
        <div>
            <label class="box2-label">换行符：</label>
            <div class="button-group">
                <input class="checkbox-button" type="radio" name="newLine" id="newLine1" value="1">
                <label for="newLine1" class="checkbox-label"><del>-删除</del></label>
                <input class="checkbox-button" type="radio" name="newLine" id="newLine2" value="2">
                <label for="newLine2" class="checkbox-label">+增加</label>
                <input class="checkbox-button" type="radio" name="newLine" id="newLine3" value="3">
                <label for="newLine3" class="checkbox-label">转逗号</label>
                <input class="checkbox-button" type="radio" name="newLine" id="newLine4" value="4">
                <label for="newLine4" class="checkbox-label">去重</label>
            </div>
        </div>
        <div>
            <label class="box2-label">逗号：</label>
            <div class="button-group">
                <input class="checkbox-button" type="radio" name="comma" id="comma1" value="1">
                <label for="comma1" class="checkbox-label"><del>-删除</del></label>
                <input class="checkbox-button" type="radio" name="comma" id="comma2" value="2">
                <label for="comma2" class="checkbox-label">+增加</label>
                <input class="checkbox-button" type="radio" name="comma" id="comma3" value="3">
                <label for="comma3" class="checkbox-label">转换行</label>
            </div>
        </div>
        <div>
            <label class="box2-label">引号：</label>
            <div class="button-group">
                <input class="checkbox-button" type="radio" name="quotes" id="quotes1" value="1">
                <label for="quotes1" class="checkbox-label"><del>-删除</del></label>
                <input class="checkbox-button" type="radio" name="quotes" id="quotes2" value="2">
                <label for="quotes2" class="checkbox-label">+加单</label>
                <input class="checkbox-button" type="radio" name="quotes" id="quotes3" value="3">
                <label for="quotes3" class="checkbox-label">+加双</label>
            </div>
        </div>
        <div>
            <label class="box2-label">去除：</label>
            <div class="button-group">
                <input class="checkbox-button" type="radio" name="blank" id="blank1" value="1">
                <label for="blank1" class="checkbox-label">两边空</label>
                <input class="checkbox-button" type="radio" name="blank" id="blank2" value="2">
                <label for="blank2" class="checkbox-label">所有空</label>
                <input class="checkbox-button" type="radio" name="blank" id="blank3" value="3">
                <label for="blank3" class="checkbox-label" title="Java/Js/Python">注释</label>
            </div>
        </div>
        <div>
            <label class="box2-label">转换：</label>
            <div class="button-group">
                <input class="checkbox-button" type="radio" name="convert" id="convert1" value="1">
                <label for="convert1" class="checkbox-label">小写</label>
                <input class="checkbox-button" type="radio" name="convert" id="convert2" value="2">
                <label for="convert2" class="checkbox-label">大写</label>
            </div>
        </div>
        <div style="min-width: 105px;max-width: 100%">
            <label class="box2-label">替换：</label>
            <input type="input" style="width: 50px" class="input-prev" id="findValue"  ><div class="input-label">➡️</div><input class="input-last" style="width: 50px" id="replaceValue" type="input" >
            <input class="checkbox-button" type="checkbox" name="replaceType" id="replaceType">
            <label for="replaceType" class="checkbox-label" title="正则替换">.*</label>
        </div>
        <div style="min-width: 550px;max-width: 100%;">
            <label class="box2-label" title="只按最终数据按行拼接">两边拼：</label>
            <input type="input" class="input-prev auto-expand" id="firstValue"  placeholder="前拼..."><div class="input-label">&nbsp;&nbsp;+ value +&nbsp;&nbsp;</div><input class="input-last auto-expand"  id="lastValue" type="input"  placeholder="后拼...">
        </div>
    </div>
    <div class="output box3" id="outputText"></div>
    <div class="btn">
        <button  onclick="resetForm()" style="background: #817f7f">重置设置</button>
        <button id="formatStringBtn" onclick="formatString()" class="breathe-btn">处理数据</button>
    </div>
    <div class="notification" id="notification">操作成功，数据已放置到剪切板!</div>
</div>

<script>
    function resetForm() {
        if (document.querySelector('input[name="newLine"]:checked')) {
            document.querySelector('input[name="newLine"]:checked').checked = false;
        }
        if (document.querySelector('input[name="quotes"]:checked')) {
            document.querySelector('input[name="quotes"]:checked').checked = false;
        }
        if (document.querySelector('input[name="comma"]:checked')) {
            document.querySelector('input[name="comma"]:checked').checked = false;
        }
        if (document.querySelector('input[name="blank"]:checked')) {
            document.querySelector('input[name="blank"]:checked').checked = false;
        }
        if (document.querySelector('input[name="convert"]:checked')) {
            document.querySelector('input[name="convert"]:checked').checked = false;
        }
        document.querySelector('#firstValue').value = ''
        document.querySelector('#lastValue').value = ''
        document.querySelector('#findValue').value = ''
        document.querySelector('#replaceValue').value = ''
        document.getElementById('outputText').innerText = '';
    }

    function formatString() {

        let lastInput = undefined;
        let tryTimes = 0;
        while(tryTimes < 5){
            tryTimes++
            let input = lastInput || document.getElementById('inputText').value;
            // 换行符
            const newLineRadio = document.querySelector('input[name="newLine"]:checked');
            if (newLineRadio) {
                let newLineValue = newLineRadio.value;
                if (newLineValue === '3') {
                    input = input.replaceAll('\n', ",");
                } else if (newLineValue === '2' && tryTimes === 1) {
                    let mark = ",";
                    let inputs = input.split(mark);
                    if (inputs.length == 1) {
                        mark = "\n";
                        inputs = input.split(mark);
                    }
                    for (let i = 0; i < inputs.length; i++) {
                        if (i !== inputs.length - 1) {
                            if (mark === ",") {
                                inputs[i] = inputs[i] + ",";
                            } else {
                                inputs[i] = inputs[i] + "\n";
                            }
                            inputs[i] += "\n";
                        }
                    }
                    input = inputs.join("");
                } else if (newLineValue === '1') {
                    input = input.replaceAll('\n', '');
                } else if (newLineValue === '4') {
                    let inputs = input.split('\n')
                    inputs = inputs.map(o => o.trim())
                    input = inputs.join("\n")
                    input = input.replace(/(\r?\n|\r){2,}/gm, '\n');
                }
            }

            // 引号
            const quotesRadio = document.querySelector('input[name="quotes"]:checked');
            if (quotesRadio) {
                let quotesValue = quotesRadio.value;
                // 加双
                if (quotesValue === '3' && tryTimes === 1) {
                    let mark = "\n";
                    let inputs = input.split(mark);
                    if (inputs.length === 1) {
                        mark = ",";
                        inputs = input.split(mark);
                    }
                    for (let i = 0; i < inputs.length; i++) {
                        let endChar = inputs[i].charAt(inputs[i].length - 1);
                        inputs[i] = '"' + inputs[i].replace(/[\n,]/, "") + '"';
                        if (endChar === '\n' || endChar === ',') {
                            inputs[i] += endChar;
                        }
                    }
                    input = inputs.join(mark);
                    // 加单
                } else if (quotesValue === '2' && tryTimes === 1) {
                    let mark = "\n";
                    let inputs = input.split(mark);
                    if (inputs.length === 1) {
                        mark = ",";
                        inputs = input.split(mark);
                    }
                    for (let i = 0; i < inputs.length; i++) {
                        let endChar = inputs[i].charAt(inputs[i].length - 1);
                        inputs[i] = "'" + inputs[i].replace(/[\n,]/, "") + "'";
                        if (endChar === '\n' || endChar === ',') {
                            inputs[i] += endChar;
                        }
                    }
                    input = inputs.join(mark);
                    // 移除
                } else if (quotesValue === '1') {
                    input = input.replace(/['"]/g, "");
                }
            }

            // 逗号
            const commaRadio = document.querySelector('input[name="comma"]:checked');
            if (commaRadio) {
                let commaValue = commaRadio.value;
                if (commaValue === '3') {
                    input = input.replace(/[,]/g, "\n");
                } else if (commaValue === '2' && tryTimes === 1) {
                    let inputs = input.split('\n');
                    for (let i = 0; i < inputs.length; i++) {
                        let endComma = inputs[i].endsWith(",");
                        if (!endComma && i !== inputs.length - 1) {
                            inputs[i] = inputs[i] + ",";
                        }
                    }
                    input = inputs.join('\n');
                } else if (commaValue === '1') {
                    input = input.replace(/[,]/g, "");
                }
            }
            const blankRadio = document.querySelector('input[name="blank"]:checked');
            if (blankRadio) {
                let blankValue = blankRadio.value;
                if (blankValue === '2') {
                    input = input.replaceAll(" ", "");
                } else if (blankValue === '1' && tryTimes === 1) {
                    let mark = "\n";
                    let inputs = input.split(mark);
                    if (inputs.length === 1) {
                        mark = ",";
                        inputs = input.split(mark);
                    }
                    for (let i = 0; i < inputs.length; i++) {
                        let hasQa = inputs[i].indexOf("'") > -1;
                        let hasQb = inputs[i].indexOf('"') > -1;
                        let hasComma = inputs[i].endsWith(",");
                        inputs[i] = inputs[i].replace(/[\n,'"]/g, "").trim();
                        if (hasQa) {
                            inputs[i] = "'" + inputs[i] + "'";
                        } else if (hasQb) {
                            inputs[i] = '"' + inputs[i] + '"';
                        }
                        if(hasComma){
                            inputs[i] = inputs[i] + ',';
                        }
                    }
                    input = inputs.join(mark);
                }else if( blankValue === '3'){
                    input = input.replace(/\/\/.*|\/\*[\s\S]*?\*\//g, '').replace(/#.*$/gm, '');
                }
            }

            // 转换
            const convertRadio = document.querySelector('input[name="convert"]:checked');
            if (convertRadio) {
                if (convertRadio.value === '1') { // 小写
                    input = input.toLowerCase();
                } else if (convertRadio.value === '2') { // 大写
                    input = input.toUpperCase();
                } 
            }

            // 替换
            let findValue = document.querySelector('#findValue').value
            let replaceValue = document.querySelector('#replaceValue').value
            let replaceType = document.querySelector("#replaceType").checked
            if(findValue || replaceValue){
                if(replaceType){
                    let reg = new RegExp(findValue, "g");
                    input = input.replace(reg, replaceValue);
                }else{
                    input = input.replaceAll(findValue, replaceValue);
                }
            }

            // 前后追加
            let firstValue = document.querySelector('#firstValue').value
            let lastValue = document.querySelector('#lastValue').value
            if((firstValue || lastValue) && tryTimes === 1){
                firstValue = firstValue || ''
                lastValue = lastValue || ''
                let mark = "\n";
                let inputs = input.split(mark);
                if (inputs.length === 1) {
                    mark = ",";
                    inputs = input.split(mark);
                }
                for (let i = 0; i < inputs.length; i++) {
                    let endChar = inputs[i].charAt(inputs[i].length - 1);
                    inputs[i] = firstValue + inputs[i].replace(/[\n,]/, "") + lastValue;
                    if (endChar === '\n' || endChar === ',') {
                        inputs[i] += endChar;
                    }
                }
                input = inputs.join(mark);
            }
            if(lastInput === input){
                break
            }
            lastInput = input
        }
        document.getElementById('outputText').innerText = lastInput;
        navigator.clipboard.writeText(lastInput).then(() => {
            showNotification();
        }).catch(err => {
            console.error('Failed to copy text: ', err);
        });
    }

    function showNotification() {
        const notification = document.getElementById('notification');
        notification.style.display = 'block';
        setTimeout(() => {
            notification.style.opacity = '1';
        }, 10);

        setTimeout(() => {
            notification.style.opacity = '0';
            setTimeout(() => {
                notification.style.display = 'none';
            }, 500);
        }, 2000);
    }

    // 检测系统主题并设置初始模式
    function setInitialTheme() {
        const savedTheme = localStorage.getItem('theme');
        const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;

        if (savedTheme) {
            document.body.classList.toggle('dark-mode', savedTheme === 'dark');
        } else {
            document.body.classList.toggle('dark-mode', prefersDarkScheme);
        }
    }

    function toggleDarkMode() {
        const body = document.body;
        body.classList.toggle('dark-mode');
        // 记忆用户选择的主题
        const theme = body.classList.contains('dark-mode') ? 'dark' : 'light';
        localStorage.setItem('theme', theme);
    }

    // 页面加载时设置初始主题
    window.onload = setInitialTheme;

    // 增加radio反选功能
    let lastChecked = {};
    document.querySelectorAll('input[type="radio"]').forEach(radio => {
        radio.addEventListener('click', function() {
            let nowName = this.name;
            if (lastChecked[nowName] === this.value) {
                this.checked = false;
                lastChecked[nowName]  = null;
            } else {
                lastChecked[nowName]  = this.value;
            }
        });
    });

    document.querySelectorAll('input.auto-expand').forEach(input => {
        input.addEventListener('input', function() {
            this.style.width = 'auto';
            this.style.width = (this.scrollWidth) + 'px';
        });
    });

    // 监听键盘按下事件
    const inputText = document.getElementById('inputText');
    document.addEventListener('keydown', function(event) {
        // 检查是否按下回车键
        if (event.key === 'Enter') {
            // 检查焦点是否在 inputText 元素上
            if (document.activeElement !== inputText) {
                // 在这里执行你的事件
                document.getElementById("formatStringBtn").click()
            }
        }
    });

    utools.onPluginEnter(({ code, type, payload, option }) => {
        document.getElementById('inputText').value = payload
    });

</script>

</body>
</html>
